import React from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Grid from '@material-ui/core/Grid';
import { Avatar } from '../../node_modules/@material-ui/core';
import avator from './avator.jpg';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withStyles } from '@material-ui/core/styles';

const handleLogin = e => {
  console.log(e);
  e.preventDefault();
  // this.setDate({
  // })
}

const styles = {
  row: {
    marginTop: 150,
    display: 'flex',
    justifyContent: 'center',
  },
  avatar: {
    margin: 10,
  },
  bigAvatar: {
    width: 60,
    height: 60,
  },
  loginBtn: {
    marginTop: 10
  }
};

function Login (props){
  const { classes } = props;
  return (
    <form autoComplete="off">
      <div className={classes.row}>
        <Avatar alt="user avator" src={avator} className={classNames(classes.avatar, classes.bigAvatar)} />
      </div>
      <Grid container justify="center">
        <Grid item xs={8}>
          <TextField
            id="userName"
            label="用户名"
            placeholder="用户名"
            margin="normal"
            fullWidth
          />
        </Grid>
        <Grid item xs={8}>
          <TextField
            id="password"
            label="密码"
            type="password"
            placeholder="密码"
            margin="normal"
            fullWidth
          />
        </Grid>
      </Grid>
      <Grid container justify="flex-end" item xs={10}>
        <Button
          variant="contained"
          color="primary"
          onClick={handleLogin}
          className={classes.loginBtn}>
          Login
        </Button>
      </Grid>
    </form>
  )
}

Login.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(Login);